<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
    <script>

        let clock = '';
        let nums = 10;
        let btn;

        function sendCode(thisBtn)
        {
            btn = thisBtn;
            btn.disabled = true; //将按钮置为不可点击
            btn.value = nums+'秒后可重新获取';
            clock = setInterval(doLoop, 1000); //一秒执行一次
        }
        function doLoop()
        {
            nums--;
            if(nums > 0){
                btn.value = nums+'秒后可重新获取';
            }else{
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                btn.value = '点击发送验证码';
                nums = 10; //重置时间
            }
        }

        $(function () {
            // Handler for .ready() called.
            $("#submitBtn").on("click", function () {
                var email = $("#reg-email").val();
                var password = $("#reg-password").val();
                var code = $("#reg-code").val();
                $.ajax({
                    url: "/api/user/isRegistered/"+email,
                    type: "GET",
                    success: function (data) {
                        if(data){
                            alert("该邮箱已经被注册");
                        }else{
                            let code = $("#code").val();
                            $.ajax({
                                url: '/api/user/register/'+email +"/"+password+"/"+code,
                                type: 'GET',
                                contentType: 'application/x-www-form-urlencoded',
                                success: function (data) {
                                    if(data){
                                        window.open("/static/welcome.html?email="+email)
                                    }else{
                                        alert("验证码错误");
                                    }
                                },
                                error:function () {
                                    alert(textStatus);
                                }
                            })
                        }
                    },
                    error:function (data) {
                        if(XMLHttpRequest.status == 303){
                            alert(XMLHttpRequest.responseText);
                        }else{
                            alert("request error");
                        }
                    }
                })
            });

            $("#getCodeBtn").on("click", function () {
                sendCode(this);
                var email = $("#reg-email").val();
                $.ajax({
                    url: "/api/user/isRegistered/"+email,
                    type: "GET",
                    contentType: 'application/x-www-form-urlencoded',
                    success: function (data) {
                        if(data){
                            alert("该邮箱已经被注册");
                        }else{
                            $.ajax({
                                url: '/api/code/generateCode/'+email,
                                type: 'GET',
                                contentType: 'application/x-www-form-urlencoded',
                                success: function (data) {
                                    alert("send success")
                                },
                                error:function () {
                                    alert(textStatus);
                                }
                            })
                        }
                    },
                })
            });
        });
    </script>
    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <!-- Content here -->
    <form>
        <div class="form-group">
            <label for="reg-email">邮箱</label>
            <input type="email" class="form-control" id="reg-email" aria-describedby="emailHelp">
        </div>
        <div class="form-group">
            <label for="reg-password">密码</label>
            <input type="password" class="form-control" id="reg-password">
        </div>
        <div class="form-group">
            <label for="reg-code">验证码</label>
            <input type="text" class="form-control" id="reg-code">
            <button type="button" id="getCodeBtn" class="btn btn-primary">获取验证码</button>
        </div>
        <button type="button" id="submitBtn" class="btn btn-primary">注册</button>
    </form>
</div>

</body>
</html>